<template>
  <div ref="myTable" class="table-div">
    <el-row v-if="showSearch" type="flex" class="pull-right table-tools">
      <div>
        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" clearable />
      </div>
      <el-dropdown
        :hide-on-click="false"
        trigger="click"
        class="tools-dropdown"
      >
        <el-button size="mini">
          <i class="el-icon-menu" />
          <i class="el-icon-arrow-down el-icon--right" />
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(th, key) in tableHeader" :key="key">
            <el-checkbox v-model="th.isShow" :label="th.label" />
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-row>

    <el-table
      ref="multipleTable"
      v-loading="loading"
      class="my-table"
      style="position: relative"
      :filters="fliters"
      :filter-method="filterHandler"
      :height="tableHeight ? tableHeight : height"
      :size="size"
      :data="filterTableData"
      fit
      :highlight-current-row="highlightCurrentRow"
      :header-cell-style="{
        // padding: '0px',
        background: '#f7f9fa',
        'font-size': '12px',
        color: '#8590a6',
      }"
      :row-style="{ 'font-size': '12px', color: '#212121' }"
      :border="border"
      :stripe="stripe"
      row-key="id"
      :show-menu="showMenu"
      :tree-props="{ children: 'nodes', hasChildren: 'hasChildren' }"
      :row-class-name="tableRowClassName"
      :expand-row-keys="expandRowKeys"
      :default-expand-all="defaultExpandAll"
      :empty-text="tableEmptyText"
      :is-refresh-table="isRefreshTable"
      @sort-change="handleSort"
      @filter-change="filterHandler"
      @row-click="handleRowClick"
      @row-dblclick="handleRowDblClick"
      @select="handleSelect"
      @select-all="handleAllSelect"
      @selection-change="handleSelectChange"
      @current-change="handleCurrentRowChange"
      @contextmenu.prevent.native="openMenu($event)"
      @cell-dblclick="handleCellDbClick"
      @expand-change="expandChange"
      @header-click="handleHeaderClick"
    >
      <el-table-column
        v-if="showCheckbox"
        align="center"
        type="selection"
        width="50"
      />
      <template v-for="(th, key) in tableHeader">
        <el-table-column
          v-if="th.isShow"
          :key="key"
          :prop="th.prop"
          :label="th.label"
          :show-overflow-tooltip="th.showTooltip ? false : true"
          :fixed="th.fixed"
          :sortable="th.sortable ? true : false"
          :filters="th.filters"
          :column-key="th.columnKey"
          :filtered-value="th.filteredValue"
          :filter-multiple="th.filterMultiple"
          :min-width="th.minWidth"
          :width="th.width"
          :align="th.align ? th.align : 'left'"
          :type="th.type"
          :formatter="th.formatter ? th.formatter : formatterValue"
          :render-header="th.renderHeader"
        >
          <template v-if="!th.hide" slot-scope="scope">
            <span v-if="th.isEdit">
              <el-input
                v-model="scope.row[scope.column.property]"
                :placeholder="th.placeholder"
                :type="
                  scope.column.property === 'pass' ||
                    scope.column.property === 'oldPass' ||
                    scope.column.property === 'newPass'
                    ? 'password'
                    : 'text'
                "
              />
            </span>
            <ex-slot
              v-if="th.render"
              :render="th.render"
              :row="scope.row"
              :index="scope.$index"
              :column="th"
            />
            <!-- 当prop: 'index'时，为序号 -->
            <span v-else-if="scope.column.property === 'index'">{{
              scope.$index + 1
            }}</span>
            <span v-else-if="showIcon && scope.column.property === iconProp">
              <svg-icon :icon-class="scope.row.icon" class-name="icon-svg" />
              <!-- 新增可嵌入html代码的行 页面渲染使用node['html'] 可渲染html代码 -->
              <span v-if="scope.row.html">
                <span
                  v-html="scope.row.html"
                /></span>
              <span v-else>{{ scope.row.text }}</span>
            </span>
            <span
              v-else-if="!th.isEdit"
              :style="{ color: scope.row.color ? scope.row.color : '#606266' }"
            >{{ scope.row[th.prop] || " " }}</span>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <ul
      v-show="visible"
      :style="{ left: left + 'px', top: top + 'px' }"
      class="contextmenu"
    >
      <slot :node="selectNode" />
    </ul>
    <!-- :current-page="pageData.pageNum" -->

    <el-pagination
      v-if="pageData"
      background
      style="text-align: center"
      :current-page.sync="pageData.pageNum"
      :page-sizes="pageSizes"
      :page-size="pageData.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="newTableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
// 自定义内容的组件
import { debounce, delay } from '@/utils'

var exSlot = {
  functional: true,
  visible: false,
  props: {
    row: Object,
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },
  render: (h, data) => {
    const params = {
      row: data.props.row,
      index: data.props.index
    }
    if (data.props.column) params.column = data.props.column
    return data.props.render(h, params)
  }
}
export default {
  name: 'CompTable',
  components: { exSlot },
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 表头数据
    tableHeader: {
      type: Array,
      default: function() {
        return []
      }
    },
    // 是否开启checkbox
    showCheckbox: {
      type: Boolean,
      default() {
        return false
      }
    },
    /** 数据加载时的loading */
    // loading: { type: Boolean, default() { return false } },
    /** 分页信息，如果为null则不展示分页
     * 有值的话格式{
     * pageNum: 1,
     * pageSize: 10,
     * total: 10
     * }
     */
    pageData: {
      type: Object,
      default: function() {
        return null
      }
    },
    /** table的size */
    size: {
      type: String,
      default() {
        return 'mini'
      }
    },
    // 表格高度默认自适应
    tableHeight: {
      type: [Number, String],
      default: ''
    },
    // 是否开启搜索框
    showSearch: {
      type: Boolean,
      default() {
        return true
      }
    },
    // 是否开启过滤按钮
    showFilter: {
      type: Boolean,
      default() {
        return true
      }
    },
    // 是否高亮当前行
    highlightCurrentRow: {
      type: Boolean,
      default() {
        return true
      }
    },
    // 某一列数据是否需要图标
    showIcon: { type: Boolean, default: false },
    // 需要图标的列
    iconProp: { type: String, default: 'name' },
    // 表格右键菜单
    showMenu: { type: Boolean, default: false },
    border: { type: Boolean, default: true },
    // 是否创建带斑马纹的表格
    stripe: { type: Boolean, default: true },
    // 树表默认展开的节点id
    expandRowKeys: {
      type: Array,
      default() {
        return []
      }
    },
    // 是否展开树表所有节点
    defaultExpandAll: { type: Boolean, default: false },
    // 空数据时显示的文本内容
    tableEmptyText: {
      type: String,
      default() {
        return '暂无数据'
      }
    },
    // 是否刷新表格
    isRefreshTable: {
      type: Boolean,
      default: false
    },
    searchKeys: { // 查询的时候要查询的字段
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 保存传过来得TableData
      newTableData: this.tableData,
      newTableHeader: this.tableHeader,
      visible: false,
      top: 0,
      left: 0,
      selectNode: null,
      prop: [],
      pageSizes: [10, 20, 50, 100], // 根据自己系统自定义
      currentPage: 1, // 默认开始页面
      pagesize: 10, // 每页的数据条数
      height: this.getPageHeight(),
      search: '',
      fliters: [],
      loading: false,
      checkedIDs: [], // 用来存储选中的节点
      // formatData: [], // 格式化数据
      // dataMap: new Map(),
      flag: false,
      row: {}
      // isCheckedAll: false // 是否全选
    }
  },
  computed: {
    filterTableData() {
      if (this.pageData) {
        return this.newTableData.slice(
          (this.currentPage - 1) * this.pagesize,
          this.currentPage * this.pagesize
        )
      } else {
        return this.newTableData
      }
    }
  },
  watch: {
    search: {
      handler: function(newValue, oldValue) {
        delay(() => {
          this.pageData.pageNum = 1
          this.currentPage = 1
          this.newTableData = this.tableData.filter((data) => {
            return Object.keys(data).some((key) => {
              const r = new RegExp(
                String(newValue).replace(/\\/g, '\\\\'),
                'ig'
              )
              if (this.searchKeys.length) {
                if (this.searchKeys.includes(key)) {
                  return r.test(String(data[key]))
                }
              } else {
                return r.test(String(data[key]))
              }
            })
          })
        }, 100)
      },
      deep: true
    },
    tableData: {
      handler: function(newValue, oldValue) {
        this.newTableData = newValue
        newValue.forEach((item) => {
          this.fliters.push(item.label)
        })
        // 解决选择参数多的分组，前往最后一页之后，再点击其他只能一页显示的分组，数据无法显示
        if (this.isRefreshTable) {
          this.currentPage = 1
          this.pagesize = 10
        }
      }
    },
    visible(value) {
      if (value) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },
  created() {
    this.tableHeader.forEach((item, key) => {
      if (item.isShow === undefined) {
        this.$set(item, 'isShow', true)
      } // 这里，给对象添加属性，用$set方法。
      if (item.isEdit === undefined) {
        this.$set(item, 'isEdit', false)
        this.$set(item, 'placeholder', '')
      }
    })
    // var tableArr = []
    // var dataMap = new Map()
    // treeToArr(this.tableData)
    // this.dataMap = dataMap
    // this.formatData = tableArr
    // function treeToArr(nodes) {
    //   nodes.forEach(item => {
    //     tableArr.push(item)
    //     dataMap.set(item.id, item)
    //     if (item.nodes) {
    //       treeToArr(item.nodes)
    //     }
    //   })
    // }
  },
  mounted() {
    const that = this
    if (that.pageData) {
      that.handleSizeChange(that.pageData.pageSize)
    }
    window.onresize = debounce(() => {
      that.height = that.getPageHeight()
    }, 100)
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val
      // eslint-disable-next-line prefer-const
      let { pageNum, pageSize, total } = this.pageData
      pageNum = val > pageSize && val * (pageNum - 1) >= total ? 1 : pageNum
      this.$emit('pagInfo', {
        ...this.pageData,
        pageNum: pageNum,
        pageSize: val
      })
      this.$emit('pagination', val)
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.$emit('pagInfo', {
        ...this.pageData,
        pageNum: val
      })
      this.$emit('paginationOne', val)
    },
    // 排序事件
    handleSort(sort) {
      this.$emit('sort-events', sort)
    },
    // 筛选事件
    filterHandler(filters) {
      this.$emit('filter-events', filters)
    },
    // 某一行被点击
    handleRowClick(row) {
      if (this.selectNode === row) {
        this.selectNode = null
        this.$refs.multipleTable.setCurrentRow()
        row = {} // 连续两次点击同一节点取消选中
      } else {
        this.selectNode = row
      }
      this.$emit('click-events', row)
    },
    // 某一行被双击
    handleRowDblClick(row) {
      this.$emit('dbclick-events', row)
    },
    // 获取checkbox所有选中行的数据
    handleSelect(rows, row) {
      if (!this.isTree()) return this.$emit('select-events', rows, row)

      this.row = row
      this.setRowSelections(rows, row)
      if (this.flag) return
      const rows1 = []
      this.getCheckedRows(this.$refs.multipleTable.data, rows1)
      this.$emit('select-events', rows1, row)
    },
    // 树表级联勾选
    setRowSelections(rows, row) {
      // 是否选中父节点
      const checked = rows.indexOf(row) !== -1
      if (checked && this.checkedIDs.indexOf(row.id) === -1) {
        this.checkedIDs.push(row.id)
      }
      if (!checked && this.checkedIDs.indexOf(row.id) !== -1) {
        this.checkedIDs.splice(this.checkedIDs.indexOf(row.id), 1)
      }
      if (row.nodes) {
        // 只对有子节点的行响应
        this.setChildrenCheck(row.nodes, checked)
      }
      // this.checkedIDs = []
      // this.getCheckedIDs(rows) // 里面存储了选中的节点和选中节点的子节点id
      // 节点未选中状态且有父节点时，判断是否需要勾选父节点
      if (row.pid) this.setParentCheck(row, checked)
    },
    setParentCheck(row, checked) {
      if (!row || row.pid === '') return
      const pNode = this.getRow(this.tableData, row.pid)
      // 节点为选中状态
      if (checked) {
        if (pNode === undefined) return // 没找到父节点
        // 递归判断父节点下的所有子节点是否都处于选中状态,如果都处于选中状态则选中父节点
        for (const item of pNode.nodes) {
          // 父节点下存在未选中的子节点
          if (this.checkedIDs.indexOf(item.id) === -1) return
        }
        // 父节点下的子节点全部选中, 则选中父节点
        // this.$refs.multipleTable.toggleRowSelection(pNode, true)
        this.flag = true
        this.$refs.multipleTable.toggleRowSelection(pNode, true)
        if (this.checkedIDs.indexOf(pNode.id) === -1) {
          this.checkedIDs.push(pNode.id)
        }
        this.flag = false
        // if (rows.indexOf(pNode) === -1) rows.push(pNode)
        this.setParentCheck(pNode, checked)
      } else {
        // 取消选中，则判断父节点是否选中，如果父节点被选中需要取消父节点的勾选
        if (this.checkedIDs.indexOf(row.pid) !== -1) {
          this.flag = true
          this.$refs.multipleTable.toggleRowSelection(pNode, false)
          this.flag = false
          if (this.checkedIDs.indexOf(row.pid) !== -1) {
            this.checkedIDs.splice(this.checkedIDs.indexOf(row.pid), 1)
          }
          this.setParentCheck(pNode, checked)
        }
        if (this.checkedIDs.indexOf(row.id) !== -1) {
          this.checkedIDs.splice(this.checkedIDs.indexOf(row.id), 1)
        }
      }
    },
    // // 递归设置父级复选框状态
    // setParentCheck(pid, rows, selected) {
    //   console.log(rows)
    //   // debugger
    //   var nodeMap = this.dataMap
    //   var pNode = nodeMap.get(pid)
    //   var pIndex = pNode.nodes.length // 父节点下的子节点长度
    //   var checked = 0 // 子节点选中长度
    //   var dom = this.$refs.multipleTable.$refs.bodyWrapper.getElementsByClassName('el-table-column--selection')[pNode.columnIndex].getElementsByClassName('el-checkbox__input')[0]
    //   rows.forEach(item => {
    //     if (item.pid === pid) checked = checked + 1
    //   })
    //   console.log(selected)

    //   if (pIndex === checked) { // 全部选中
    //     this.flag = true
    //     this.$refs.multipleTable.toggleRowSelection(pNode, true)
    //     this.flag = false
    //   } else if (checked > 0) {
    //     this.flag = true
    //     this.$refs.multipleTable.toggleRowSelection(pNode, false)
    //     this.flag = false
    //     // if (selected) {
    //     dom.classList.add('is-indeterminate')
    //     // } else {
    //     //   dom.classList.remove('is-indeterminate')
    //     // }
    //   } else {
    //     // 父节点下的子节点没有全选
    //     this.flag = true
    //     this.$refs.multipleTable.toggleRowSelection(pNode, false)
    //     this.flag = false
    //   }

    //   if (pNode.pid) this.setParentCheck(pNode.pid, rows)
    // },
    // 递归设置复选框状态
    setChildrenCheck(nodes, selected) {
      nodes.forEach((item) => {
        this.flag = true
        this.$refs.multipleTable.toggleRowSelection(item, selected)
        if (selected) {
          if (this.checkedIDs.indexOf(item.id) === -1) {
            this.checkedIDs.push(item.id)
          }
        } else {
          if (this.checkedIDs.indexOf(item.id) !== -1) {
            this.checkedIDs.splice(this.checkedIDs.indexOf(item.id), 1)
          }
        }
        this.flag = false
        if (item.nodes) {
          this.setChildrenCheck(item.nodes, selected)
        }
      })
    },
    // 获取点击全选checkbox时的数据
    handleAllSelect(rows) {
      this.$emit('select-all-events', rows)
    },

    // 当选中内容发生改变时，获取所有checkbox选中数据
    handleSelectChange(rows) {
      if (!this.isTree()) return this.$emit('selection-change', rows)
      this.$nextTick(() => {
        this.setRowSelections(rows, this.row)
      })
      const rows1 = []
      this.getCheckedRows(this.$refs.multipleTable.data, rows1)
      if (this.flag) return
      this.$emit('selection-change', rows1)
    },
    // 点击单行触发事件（需要配置highlight-current-row属性）
    handleCurrentRowChange(currentRow, oldCurrentRow) {
      this.$emit('change-current-row-event', currentRow, oldCurrentRow)
    },
    // 切换行的选中状态
    toggleRowSelection(row, selected) {
      if (row === undefined) return
      this.$nextTick(() => {
        return this.$refs.multipleTable.toggleRowSelection(row, selected)
      })
    },
    // 右键点击某一行时触发事件
    // handleRightClick(row, column, event) {
    //   this.$emit('right-click-event', row, column, event)
    // },
    openMenu(e) {
      if (!this.showMenu) return
      // const menuMinWidth = 10
      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
      const offsetWidth = this.$el.offsetWidth // container width
      // const maxLeft = offsetWidth - menuMinWidth // left boundary
      const left = e.clientX - offsetLeft + 15 // 15: margin right
      if (left > offsetWidth) {
        this.left = offsetWidth
      } else {
        this.left = left
      }
      this.top = e.clientY
      this.visible = true
    },
    closeMenu(e) {
      var dom = e.target
      this.visible = this.hasClass(dom, 'disabled')
    },
    hasClass(element, cls) {
      return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1
    },
    formatterValue(row, column, cellValue) {
      return cellValue
    },
    getSelection() {
      return this.selectNode
    },
    getSelections() {
      return this.$refs.multipleTable.selection
    },
    showLoading() {
      this.loading = true
    },
    hideLoading() {
      setTimeout(() => {
        this.loading = false
      }, 500)
    },
    // 设置表格行颜色，用法：需要设置stripe为false，并在对应页面添加setRowColor函数（示例：flow/dataQueueQuery.vue）
    // 返回值可以为success-row, info-row, warning-row, danger-row
    tableRowClassName({ row, rowIndex }) {
      if (this.$parent.setRowColor !== undefined) {
        return this.$parent.setRowColor({ row, rowIndex })
      }
    },
    // 单元格双击事件
    handleCellDbClick(row, column, cell, event) {
      this.$emit('cell-dblclick', row, column, cell, event)
    },
    getPageHeight() {
      return (
        (window.innerHeight ||
          document.documentElement.clientHeight ||
          document.body.clientHeight) - 200
      )
    },
    // 表格展开事件
    expandChange(row, expanded) {
      if (row.nodes) {
        if (expanded) {
          if (row.icon === undefined || row.icon === 'folder') {
            row.icon = 'folder-open'
          }
        } else {
          if (row.icon === undefined || row.icon === 'folder-open') {
            row.icon = 'folder'
          }
        }
        // }
      }
      this.$emit('expandChange', row, expanded)
    },
    handleHeaderClick(column, e) {
      this.$emit('header-click', column, e)
    },
    // 切换所有行的选中状态
    toggleAllSelection() {
      this.$refs.multipleTable.toggleAllSelection()
    },
    // 切换某一行的展开状态
    toggleRowExpansion(row, expanded) {
      this.$nextTick(() => {
        this.$refs.multipleTable.toggleRowExpansion(row, expanded)
      })
    },
    // 设置表格某一行为高亮 / 选中状态
    setCurrentRow(row) {
      this.$refs.multipleTable.setCurrentRow(row)
    },
    // 获取选中的节点
    getCheckedIDs(rows) {
      for (const item of rows) {
        const index = this.checkedIDs.indexOf(item.id)
        if (index === -1) this.checkedIDs.push(item.id)
        if (item.nodes && item.nodes.length > 0) {
          return this.getCheckedIDs(item.nodes)
        }
      }
    },
    getCheckedRows(data, rows) {
      // 不传参返回所有选中
      if (!data && !rows) {
        return this.getSelections()
      }
      for (const item of data) {
        if (this.checkedIDs.indexOf(item.id) !== -1) {
          rows.push(item)
        }
        if (item.nodes && item.nodes.length > 0) {
          this.getCheckedRows(item.nodes, rows)
        }
      }
      return rows
    },
    // 根据id查找节点
    getRow(data, id) {
      let node
      const getNode = (data, id) => {
        for (const item of data) {
          if (item['id'] === id) {
            node = item
          } else if (item.nodes && item.nodes.length > 0) {
            getNode(item.nodes, id)
          }
        }
      }
      getNode(data, id)
      return node
    },
    // 根据id获取row数据
    getRowById(id) {
      const array = this.tableData
      for (let i = 0; i < array.length; i++) {
        if (array[i].id === id) {
          return array[i]
        }
      }
      return null
    },
    /**
     * 根据Id 删除一行 或 多行
     */
    removeRow(ids) {
      if (!ids) return
      if (typeof id === 'string') {
        ids = [ids]
      }
      this.newTableData = this.newTableData.filter((a) => {
        return ids.indexOf(a.id) === -1
      })
    },
    // 判断是否为树表
    isTree() {
      for (const item of this.$refs.multipleTable.data) {
        if (item.nodes && item.nodes.length > 0) return true
      }
      return false
    }
  }
}
</script>
<style lang="scss" scoped>
.table-div {
  height: 100%;
  .el-pagination {
    padding: 15px 0;
  }
  .table-tools {
    padding-bottom: 6px;
    margin-bottom: 10px;
    // margin-bottom: 0;
    .tools-dropdown {
      padding-left: 8px;
      .el-button--mini {
        padding: 0 8px;
        height: 28px;
      }
    }
  }

  .el-table.my-table ::v-deep {
    width: 99.9%;
    th,
    td {
      //padding: 3px 0;
      .el-button--mini {
        padding: 2px 8px;
        height: 20px;
        transform: translateY(1.5px);
        border-radius: 1px;
        // 文字垂直居中
        > span {
          position: relative;
          top: -1px;
        }
      }
      .el-button + .el-button {
        margin-left: 5px;
      }
    }

    .success-row {
      background: #f0f9eb;
    }
    .info-row {
      background: #ecf5ff;
    }
    .warning-row {
      background: #fdf6ec;
    }
    .danger-row {
      background: #fef0f0;
    }

    //滚动条样式
    .el-table__body-wrapper {
      padding-bottom: 15px;
    }

    .el-table__body-wrapper::-webkit-scrollbar {
      /*滚动条整体样式*/
      width: 7px;
      /*高宽分别对应横竖滚动条的尺寸*/
      height: 6px;
    }

    .el-table__body-wrapper::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: #ccc;
    }

    .el-table__body-wrapper::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      background: #ededed;
    }
  }

  // table右键菜单样式
  .contextmenu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    min-width: 160px;
    padding: 5px 0px;
    margin: 2px 0 0;
    font-size: 12px;
    text-align: left;
    list-style: none;
    cursor: pointer;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);
    box-shadow: 0 6px 12px rgb(0 0 0 / 18%);

    > li {
      display: block;
      padding: 3px 20px;
      clear: both;
      font-weight: 400;
      line-height: 1.42857143;
      white-space: nowrap;
    }

    //选中样式
    li:hover {
      background-color: #eee;
    }
  }
}
</style>
<style scoped lang="css">
/* 设置tooltip宽度 */
.el-tooltip__popper {
  max-width: 400px;
}
</style>
